<template>
  <div class="my-tabbar" :class="{'tabbar-fixed-bottom': fixedBottom, classAttach: true}">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'MyTabbar',
    props: {
      selected: {
        type: String
      },
      classAttach: {
        type: String
      },
      fixedBottom: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      selected: function (newValue) {
        this.$emit('change', newValue)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/variable";
  @import "../../assets/css/px2rem";

  .my-tabbar{
    display: flex;
    width:100%;
    text-align: center;
    height: px2rem($tabbar-height);
    /*margin: px2rem(10px) 0;*/
    background: white;
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
  }


</style>
